[Overview] Make menu sizes relative to workspace area

Instead of setting a fixed size in the CSS which only works well
with a limited range of screen resolutions, assign a relative
size in the code.

While this takes away some flexibility from theme authors, it is in
line with most elements in the overview (workspaces area, dash).

Also expose the menu panes vertical alignment, so that more-apps aligns
to the workspaces area's top and more-docs to the bottom.

https://bugzilla.gnome.org/show_bug.cgi?id=610872

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 3eb74329c12a821112d591ef476e5907663aba13..102ec8fd04b206c6fb5084eb9f7ffd09a8fd8ee8 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -456,7 +456,6 @@ StTooltip {
     background-color: #111111;
     border: 2px solid #868686;
     color: #ffffff;
-    height: 400px;
 }
 
 .all-app-controls-panel {

diff --git a/js/ui/dash.js b/js/ui/dash.js
index 3d2d7e9287691bb5e287bf3b59ab6d786857e0ba..e36bd2d95a0f70c48bfb36d8fa744f81eb3eb9f9 100644 (file)
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -142,7 +142,7 @@ function createPaneForDetails(dash, display) {
                     detailPane.destroyContent();
                 }
             }));
-            dash._addPane(detailPane);
+            dash._addPane(detailPane, St.Align.START);
         }
 
         if (index >= 0) {
@@ -857,7 +857,7 @@ Dash.prototype = {
         this._appsSection.header.moreLink.connect('activated', Lang.bind(this, function (link) {
             if (this._allApps == null) {
                 this._allApps = new AppDisplay.AllAppDisplay();
-                this._addPane(this._allApps);
+                this._addPane(this._allApps, St.Align.START);
                 link.setPane(this._allApps);
            }
         }));
@@ -885,7 +885,7 @@ Dash.prototype = {
             if (this._moreDocsPane == null) {
                 this._moreDocsPane = new ResultPane(this);
                 this._moreDocsPane.packResults(DOCS);
-                this._addPane(this._moreDocsPane);
+                this._addPane(this._moreDocsPane, St.Align.END);
                 link.setPane(this._moreDocsPane);
            }
         }));
@@ -964,7 +964,7 @@ Dash.prototype = {
             this._activePane.close();
     },
 
-    _addPane: function(pane) {
+    _addPane: function(pane, align) {
         pane.connect('open-state-changed', Lang.bind(this, function (pane, isOpen) {
             if (isOpen) {
                 if (pane != this._activePane && this._activePane != null) {
@@ -975,7 +975,7 @@ Dash.prototype = {
                 this._activePane = null;
             }
         }));
-        Main.overview.addPane(pane);
+        Main.overview.addPane(pane, align);
     }
 };
 Signals.addSignalMethods(Dash.prototype);

diff --git a/js/ui/overview.js b/js/ui/overview.js
index bc0304f135eae2efada6e006049f0f9e3b9c7517..cf3b574bc5973215a205511c7b8b8b54be91de9d 100644 (file)
--- a/js/ui/overview.js
+++ b/js/ui/overview.js
@@ -357,8 +357,11 @@ Overview.prototype = {
 
     },
 
-    addPane: function (pane) {
-        this._paneContainer.add(pane.actor, { expand: true, y_fill: false, y_align: St.Align.START });
+    addPane: function (pane, align) {
+        pane.actor.height = .9 * this._workspacesHeight;
+        this._paneContainer.add(pane.actor, { expand: true,
+                                              y_fill: false,
+                                              y_align: align });
         // When a pane is displayed, we raise the transparent background to the top
         // and connect to button-release-event on it, then raise the pane above that.
         // The idea here is that clicking anywhere outside the pane should close it.